<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-autocomplete clearable v-model="queryForm.provinceName" class="filter-item" placeholder="省份" style="width: 125px;" :fetch-suggestions="querySearch" @select="handleSelectCity" @clear="clearProvince">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.cityName" class="filter-item" placeholder="城市" style="width: 125px;" :fetch-suggestions="querySearchCity" @select="handleSelectDistrict" @clear="clearCity">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.districtName" class="filter-item" placeholder="区" style="width: 125px;" :fetch-suggestions="querySearchDistrict" @select="handleSelectCommunity" @clear="clearCommunity">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.communityName" class="filter-item" placeholder="小区" style="width: 125px;" :fetch-suggestions="querySearchCommunity" @select="handleSelectBuildings" @clear="clearLast">
      </el-autocomplete> -->
      <el-select
        clearable
        v-model="queryForm.provinceId"
        class="filter-item"
        filterable
        placeholder="省份"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseProvince', 'query')"
      >
        <el-option
          v-for="(item, index) in provinces"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.cityId"
        class="filter-item"
        filterable
        placeholder="城市"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCity', 'query')"
      >
        <el-option
          v-for="(item, index) in citys"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.districtId"
        class="filter-item"
        filterable
        placeholder="区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseDistrict', 'query')"
      >
        <el-option
          v-for="(item, index) in districts"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        v-model="queryForm.communityId"
        class="filter-item"
        filterable
        placeholder="小区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCommunity', 'query')"
      >
        <el-option
          v-for="(item, index) in communitys"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入小区名称"
        v-model.trim="queryForm.communityName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入门名称"
        v-model.trim="queryForm.doorName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入设备号"
        v-model.trim="queryForm.deviceCode"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入电源编码"
        v-model.trim="queryForm.powerCode"
      >
      </el-input>
      <el-button
        class="filter-item"
        @click="doSearchQuery"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        v-permission="'communityDoor:add'"
        class="filter-item"
        style="margin-left: 10px;"
        @click="openAddDoor"
        type="success"
        icon="el-icon-plus"
        >新增</el-button
      >
    </div>
    <el-table v-loading="loading" :data="records" style="width: 100%">
      <el-table-column prop="doorId" label="门编号" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="doorName"
        label="门名称"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="provinceName"
        label="省/市/区"
        width="450"
        align="center"
      >
        <template slot-scope="scope">
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName !== undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}/${scope.row.villageName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName === undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}`
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="communityName"
        label="小区名称"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="deviceCode"
        label="设备编码"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="connectStatus"
        label="设备状态"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.DEVICE_CONNECT_STATUS[scope.row.connectStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="powerCode"
        label="电源编码"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="powerStatus"
        label="电源状态"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.POWER_ONLINE_STATUS[scope.row.powerStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding "
        fixed="right"
        width="250"
      >
        <template slot-scope="scope">
          <el-dropdown
            split-button
            size="mini"
            type="success"
            trigger="click"
            v-permission="'communityDoor:update'"
            @click="editExample(scope.row)"
          >
            <span
              class="el-dropdown-link"
              style="font-size:13px;vertical-align:top;"
            >
              编辑门
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-permission="'communityDoor:bindDevice'"
                v-if="scope.row.deviceCode === undefined"
                @click.native="bindDevice(scope.row.doorId)"
              >
                <i class="el-icon-check"></i>
                绑定门禁
              </el-dropdown-item>
              <el-dropdown-item
                v-permission="'communityDoor:unbindDevice'"
                v-if="scope.row.deviceCode !== undefined"
                @click.native="unbindDevice(scope.row.doorId)"
              >
                <i class="el-icon-warning"></i>
                解绑门禁
              </el-dropdown-item>
              <el-dropdown-item
                v-permission="'communityDoor:bindPowerDevice'"
                v-if="scope.row.powerCode === undefined"
                @click.native="bindPowerDevice(scope.row.doorId)"
              >
                <i class="el-icon-check"></i>
                绑定电源
              </el-dropdown-item>
              <el-dropdown-item
                v-permission="'communityDoor:unbindDevice'"
                v-if="scope.row.powerCode !== undefined"
                @click.native="unbindPowerDevice(scope.row.doorId)"
              >
                <i class="el-icon-warning"></i>
                解绑电源
              </el-dropdown-item>
              <el-dropdown-item
                v-permission="'communityDoor:handleOpenDoor'"
                v-if="scope.row.deviceCode !== undefined"
                @click.native="handleOpenDoor(scope.row)"
              >
                <i class="el-icon-refresh"></i>
                开门
              </el-dropdown-item>
              <el-dropdown-item
                v-permission="'communityDoor:handleSyncParam'"
                v-if="scope.row.deviceCode !== undefined"
                @click.native="handleSyncParam(scope.row)"
              >
                <i class="el-icon-download"></i>
                同步
              </el-dropdown-item>
              <el-dropdown-item
                v-permission="'communityDoor:delete'"
                @click.native="handleDelete(scope.row.doorId)"
              >
                <i class="el-icon-delete"></i>
                删除门
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button size="mini" type="success" v-if="scope.row.deviceCode !== undefined" @click="queryDeviceById(scope.row.doorId)" title="查看门禁设备详情" icon="el-icon-search" circle></el-button> -->
          <!-- <el-button size="mini" type="default" v-if="scope.row.powerCode !== undefined" @click="queryPowerDeviceById(scope.row.doorId)" title="查看电源设备详情" icon="el-icon-search" circle></el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="`${exampleForm.rowId ? '编辑' : '新增'}小区门`"
      :visible.sync="dialogFormVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="exampleForm"
        label-width="80px"
        :rules="exampleFormRules"
        ref="exampleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="省份" prop="provinceId" v-show="showProvince">
              <!-- <el-autocomplete clearable v-model="exampleForm.provinceName" class="filter-item" placeholder="省份" style="width: 100%;" :fetch-suggestions="addQuerySearch" @select="addHandleSelectCity" @clear="addClearProvince">
              </el-autocomplete> -->
              <el-select
                clearable
                v-model="exampleForm.provinceId"
                filterable
                placeholder="省份"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseProvince', 'example')"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门名称:" prop="name">
              <el-input
                v-model.trim="exampleForm.name"
                placeholder="门名称"
                auto-complete="off"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="城市" prop="cityId" v-show="showCity">
              <!-- <el-autocomplete clearable v-model="exampleForm.cityName" class="filter-item" placeholder="城市" style="width: 100%;" :fetch-suggestions="addQuerySearchCity" @select="addHandleSelectDistrict" @clear="addClearCity">
              </el-autocomplete> -->
              <el-select
                clearable
                v-model="exampleForm.cityId"
                filterable
                placeholder="城市"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseCity', 'example')"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门状态" prop="status">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="exampleForm.status"
              >
                <el-option
                  v-for="(val, key) in Dicts.CONSUMER_STATUS"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区县" prop="districtId" v-show="showDistrict">
              <!-- <el-autocomplete clearable v-model="exampleForm.districtName" class="filter-item" placeholder="区县" style="width: 100%;" :fetch-suggestions="addQuerySearchDistrict" @select="addHandleSelectCommunity" @clear="addClearCommunity">
              </el-autocomplete> -->
              <el-select
                clearable
                v-model="exampleForm.districtId"
                filterable
                placeholder="区县"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseDistrict', 'example')"
              >
                <el-option
                  v-for="(item, index) in districts"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="子门1:" prop="door1">
              <el-input
                v-model.trim="exampleForm.door1"
                placeholder="子门1"
                auto-complete="off"
                maxlength="16"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="小区"
              prop="communityId"
              v-show="showCommunity"
            >
              <!-- <el-autocomplete clearable v-model="exampleForm.communityName" class="filter-item" placeholder="小区" style="width: 100%;" :fetch-suggestions="addQuerySearchBuildings" @select="addHandleSelect" @clear="addClear">
              </el-autocomplete> -->
              <el-select
                v-model="exampleForm.communityId"
                filterable
                placeholder="小区"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseCommunity', 'example')"
              >
                <el-option
                  v-for="(item, index) in communitys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="子门2:" prop="door2">
              <el-input
                v-model.trim="exampleForm.door2"
                placeholder="子门2"
                auto-complete="off"
                maxlength="16"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="子门3:" prop="door3">
              <el-input
                v-model.trim="exampleForm.door3"
                placeholder="子门3"
                auto-complete="off"
                maxlength="16"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDoor">确 定</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog :title="`门禁设备详情`" :visible.sync="deviceDetailFormVisible" width="45%">
      <el-form :model="deviceDetailForm" label-width="130px" ref="deviceDetailForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="门名称:" prop="doorName">
              {{deviceDetailForm.doorName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编码:" prop="deviceCode">
              {{deviceDetailForm.deviceCode}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备状态:" prop="connectStatus">
              <template slot-scope="scope">
                {{Dicts.DEVICE_CONNECT_STATUS[deviceDetailForm.connectStatus]}}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本地软件版本:" prop="localSwVer">
              {{deviceDetailForm.localSwVer}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="本地白名单版本:" prop="localWhiteVer">
              <template slot-scope="scope">
                {{deviceDetailForm.localWhiteVer}}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备鉴权码:" prop="authCode">
              {{deviceDetailForm.authCode}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="终端通讯号码:" prop="termiPhoneNum">
              <template slot-scope="scope">
                {{deviceDetailForm.termiPhoneNum}}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本地用户信息版本:" prop="localUserVer">
              {{deviceDetailForm.localUserVer}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急密码:" prop="openDoorPwd">
              <template slot-scope="scope">
                {{deviceDetailForm.openDoorPwd}}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="unbindDeviceButton">
        <el-button @click="handleOpenDoor(deviceDetailForm)">开门</el-button>
        <el-button @click="handleSyncParam(deviceDetailForm)">同步</el-button>
        <el-button @click="unbindDevice(deviceDetailForm.doorId)">解绑</el-button>
      </div>
    </el-dialog> -->

    <!-- <el-dialog :title="`电源设备详情`" :visible.sync="powerDetailFormVisible" width="40%">
      <el-form :model="powerDetailForm" label-width="80px" ref="powerDetailForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="门名称:" prop="doorName">
              {{powerDetailForm.doorName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电源编码:" prop="deviceCode">
              {{powerDetailForm.powerCode}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供电状态:" prop="lockPowerStatus">
              <template slot-scope="scope">
                {{Dicts.POWER_LOCK_STATUS[powerDetailForm.lockPowerStatus]}}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="unbindPowerDeviceButton">
        <el-button @click="unbindPowerDevice(powerDetailForm.doorId)">解绑</el-button>
      </div>
    </el-dialog> -->

    <el-dialog
      :title="`${deviceForm.doorId ? '选择' : '选择'}设备`"
      :visible.sync="deviceFormVisible"
      width="20%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="deviceForm"
        label-width="80px"
        :rules="deviceFormRules"
        ref="deviceForm"
      >
        <el-form-item label="设备" prop="deviceId">
          <el-select
            v-model="deviceForm.deviceId"
            placeholder="请输入设备编码"
            style="width: 100%;"
            filterable
          >
            <el-option
              v-for="(item, index) in devices"
              :key="index"
              :value="item.rowId"
              :label="item.deviceCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deviceFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveDoorDevice"
          v-show="showDeviceButton"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="`${powerForm.doorId ? '选择' : '选择'}电源`"
      :visible.sync="powerFormVisible"
      width="20%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="powerForm"
        label-width="80px"
        :rules="powerFormRules"
        ref="powerForm"
      >
        <el-form-item label="电源" prop="powerId">
          <el-select
            v-model="powerForm.powerId"
            placeholder="请输入电源编码"
            style="width: 100%;"
            filterable
          >
            <el-option
              v-for="(item, index) in powers"
              :key="index"
              :value="item.rowId"
              :label="item.powerCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="powerFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveDoorPower"
          v-show="showPowerButton"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectCommunityDoor,
  deleteDoor,
  querDoorDetail,
  saveDoor,
  selectAllCommunity,
  selectDevice,
  addDoorDevice,
  selectPowerDevice,
  addDoorPowerDevice,
  deleteDoorDevice,
  deletePowerDevice,
  selectDeviceDoor,
  selectPowerDeviceById
} from '@/api/community'
import { queryProvince, getCity, getDistrict } from '@/api/area'
import { openDoor, syncParam } from '@/api/device'
export default {
  name: 'communityDoor',
  data() {
    return {
      loading: false,
      showDeviceButton: true,
      showPowerButton: true,
      dialogFormVisible: false,
      detailFormVisible: false,
      // deviceDetailFormVisible: false,
      // powerDetailFormVisible: false,
      unbindDeviceButton: true,
      unbindPowerDeviceButton: true,
      powerDetailForm: [],
      deviceDetailForm: [],
      showUnitName: false,
      showHouseName: false,
      showProvince: false,
      showCity: false,
      showDistrict: false,
      showCommunity: false,
      deviceFormVisible: false,
      deviceForm: [],
      powerFormVisible: false,
      powerForm: [],
      detailForm: [],
      exampleForm: [
        {
          rowId: undefined,
          provinceId: '',
          provinceName: '',
          cityId: '',
          districtId: '',
          townId: '',
          villageId: '',
          name: '',
          code: '',
          type: '',
          status: '',
          tel: ''
        }
      ],
      provinces: [],
      citys: [],
      districts: [],
      communitys: [],
      devices: [],
      powers: [],
      exampleFormRules: {
        type: [{ required: true, message: '请选择门类型', trigger: 'change' }],
        status: [{ required: true, message: '请选择门状态', trigger: 'change' }]
      },
      deviceFormRules: {
        deviceId: [{ required: true, message: '请选择设备', trigger: 'change' }]
      },
      powerFormRules: {
        powerId: [
          { required: true, message: '请选择电源设备', trigger: 'change' }
        ]
      },
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        ascs: '',
        descs: '',
        importance: undefined,
        title: undefined,
        cnName: undefined
      },
      records: []
    }
  },
  created() {
    this.doQuery()
  },
  methods: {
    // createFilter(queryString) {
    //   return (restaurants) => {
    //     return (restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
    //   }
    // },
    // querySearch(queryString, cb) {
    //   const restaurants = this.provinces
    //   for (let i = 0; i < restaurants.length; i++) {
    //     restaurants[i].value = restaurants[i].cnName
    //   }
    //   const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // handleSelectCity(item) {
    //   this.queryForm.provinceId = item.rowId
    //   getCity(this.queryForm.provinceId).then(({ data: { data }}) => {
    //     this.queryForm.cityId = ''
    //     this.queryForm.districtId = ''
    //     this.queryForm.communityId = ''
    //     this.queryForm.rowId = ''
    //     this.citys = []
    //     this.districts = []
    //     this.communitys = []
    //     this.buildings = []
    //     this.citys = data
    //   })
    // },
    // clearProvince() {
    //   this.queryForm.provinceId = ''
    //   if (this.queryForm.cityId !== '' || this.citys !== []) {
    //     this.queryForm.cityId = ''
    //     this.queryForm.cityName = ''
    //     this.citys = []
    //   }
    //   if (this.queryForm.districtId !== '') {
    //     this.queryForm.districtId = ''
    //     this.queryForm.districtName = ''
    //     this.districts = []
    //   }
    //   if (this.queryForm.communityId !== '') {
    //     this.queryForm.communityId = ''
    //     this.queryForm.communityName = ''
    //     this.communitys = []
    //   }
    // },
    // querySearchCity(queryString, cb) {
    //   const restaurants = this.citys
    //   for (let i = 0; i < restaurants.length; i++) {
    //     restaurants[i].value = restaurants[i].cnName
    //   }
    //   const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // handleSelectDistrict(item) {
    //   this.queryForm.cityId = item.rowId
    //   this.queryForm.cityName = item.cnName
    //   getDistrict(this.queryForm.cityId).then(({ data: { data }}) => {
    //     this.queryForm.districtId = ''
    //     this.queryForm.communityId = ''
    //     this.queryForm.rowId = ''
    //     this.districts = []
    //     this.communitys = []
    //     this.buildings = []
    //     this.districts = data
    //   })
    // },
    // clearCity() {
    //   this.queryForm.cityId = ''
    //   if (this.queryForm.districtId !== '' || this.districts !== []) {
    //     this.queryForm.districtId = ''
    //     this.queryForm.districtName = ''
    //     this.districts = []
    //   }
    //   if (this.queryForm.communityId !== '') {
    //     this.queryForm.communityId = ''
    //     this.queryForm.communityName = ''
    //     this.communitys = []
    //   }
    //   // this.queryForm.districtId = ''
    //   // this.queryForm.communityId = ''
    //   // this.queryForm.buildId = ''
    //   // this.queryForm.districtName = ''
    //   // this.queryForm.communityName = ''
    //   // this.queryForm.buildingsName = ''
    //   // this.districts = []
    //   // this.communitys = []
    //   // this.buildings = []
    // },
    // querySearchDistrict(queryString, cb) {
    //   const restaurants = this.districts
    //   for (let i = 0; i < restaurants.length; i++) {
    //     restaurants[i].value = restaurants[i].cnName
    //   }
    //   const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // handleSelectCommunity(item) {
    //   this.queryForm.districtId = item.rowId
    //   this.queryForm.districtName = item.cnName
    //   selectAllCommunity(this.queryForm.districtId).then(({ data: { data }}) => {
    //     this.queryForm.communityId = ''
    //     this.queryForm.rowId = ''
    //     this.communitys = []
    //     this.buildings = []
    //     this.communitys = data
    //   })
    // },
    // querySearchCommunity(queryString, cb) {
    //   const restaurants = this.communitys
    //   for (let i = 0; i < restaurants.length; i++) {
    //     restaurants[i].value = restaurants[i].name
    //   }
    //   const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // handleSelectBuildings(item) {
    //   this.queryForm.communityId = item.rowId
    //   this.queryForm.communityName = item.name
    // },
    // clearCommunity() {
    //   this.queryForm.districtId = ''
    //   if (this.queryForm.communityId !== '' || this.communitys !== []) {
    //     this.queryForm.communityId = ''
    //     this.queryForm.communityName = ''
    //     this.communitys = []
    //   }
    //   // this.queryForm.communityId = ''
    //   // this.queryForm.buildId = ''
    //   // this.queryForm.communityName = ''
    //   // this.queryForm.buildingsName = ''
    //   // this.communitys = []
    //   // this.buildings = []
    // },
    // clearLast() {
    //   this.queryForm.communityId = ''
    //   this.queryForm.communityName = ''
    // },
    // addQuerySearch(queryString, cb) {
    //   const restaurants = this.provinces
    //   for (let i = 0; i < restaurants.length; i++) {
    //     restaurants[i].value = restaurants[i].cnName
    //   }
    //   const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // addHandleSelectCity(item) {
    //   this.exampleForm.provinceId = item.rowId
    //   getCity(this.exampleForm.provinceId).then(({ data: { data }}) => {
    //     this.exampleForm.cityId = ''
    //     this.exampleForm.districtId = ''
    //     this.exampleForm.communityId = ''
    //     this.citys = []
    //     this.districts = []
    //     this.communitys = []
    //     this.citys = data
    //   })
    // },
    // addClearProvince() {
    //   this.exampleForm.provinceId = ''
    //   if (this.exampleForm.cityId !== '' || this.citys !== []) {
    //     this.exampleForm.cityId = ''
    //     this.exampleForm.cityName = ''
    //     this.citys = []
    //   }
    //   if (this.exampleForm.districtId !== '') {
    //     this.exampleForm.districtId = ''
    //     this.exampleForm.districtName = ''
    //     this.districts = []
    //   }
    //   if (this.exampleForm.communityId !== '') {
    //     this.exampleForm.communityId = ''
    //     this.exampleForm.communityName = ''
    //     this.communitys = []
    //   }
    // },
    // addQuerySearchCity(queryString, cb) {
    //   const restaurants = this.citys
    //   for (let i = 0; i < restaurants.length; i++) {
    //     restaurants[i].value = restaurants[i].cnName
    //   }
    //   const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // addHandleSelectDistrict(item) {
    //   this.exampleForm.cityId = item.rowId
    //   this.exampleForm.cityName = item.cnName
    //   getDistrict(this.exampleForm.cityId).then(({ data: { data }}) => {
    //     this.exampleForm.districtId = ''
    //     this.exampleForm.communityId = ''
    //     this.districts = []
    //     this.communitys = []
    //     this.districts = data
    //   })
    // },
    // addClearCity() {
    //   this.exampleForm.cityId = ''
    //   if (this.exampleForm.districtId !== '' || this.districts !== []) {
    //     this.exampleForm.districtId = ''
    //     this.exampleForm.districtName = ''
    //     this.districts = []
    //   }
    //   if (this.exampleForm.communityId !== '') {
    //     this.exampleForm.communityId = ''
    //     this.exampleForm.communityName = ''
    //     this.communitys = []
    //   }
    // },
    // addQuerySearchDistrict(queryString, cb) {
    //   const restaurants = this.districts
    //   for (let i = 0; i < restaurants.length; i++) {
    //     restaurants[i].value = restaurants[i].cnName
    //   }
    //   const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // addHandleSelectCommunity(item) {
    //   this.exampleForm.districtId = item.rowId
    //   this.exampleForm.districtName = item.cnName
    //   selectAllCommunity(this.exampleForm.districtId).then(({ data: { data }}) => {
    //     this.exampleForm.communityId = ''
    //     this.communitys = []
    //     this.communitys = data
    //   })
    // },
    // addClearCommunity() {
    //   this.exampleForm.districtId = ''
    //   if (this.exampleForm.communityId !== '' || this.communitys !== []) {
    //     this.exampleForm.communityId = ''
    //     this.exampleForm.communityName = ''
    //     this.communitys = []
    //   }
    // },
    // addQuerySearchBuildings(queryString, cb) {
    //   const restaurants = this.communitys
    //   for (let i = 0; i < restaurants.length; i++) {
    //     restaurants[i].value = restaurants[i].name
    //   }
    //   const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    //   // 调用 callback 返回建议列表的数据
    //   cb(results)
    // },
    // addClear() {
    //   this.exampleForm.communityId = ''
    // },
    // addHandleSelect(item) {
    //   this.exampleForm.communityId = item.rowId
    //   this.exampleForm.communityName = item.name
    // },
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doSearchQuery() {
      this.queryForm.current = 1
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      selectCommunityDoor(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
      queryProvince().then(({ data: { data } }) => {
        this.provinces = data
        this.loading = false
      })
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDoor(rowId).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    bindDevice(doorId) {
      this.showDeviceButton = true
      this.deviceFormVisible = true
      this.deviceForm = {}
      selectDevice().then(({ data: { data } }) => {
        this.deviceForm.doorId = doorId
        this.devices = data
        this.loading = false
      })
      this.$refs.deviceForm && this.$refs.deviceForm.resetFields()
    },
    unbindDevice(doorId) {
      this.$confirm('是否解绑该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDoorDevice(doorId).then(({ data: { data, msg } }) => {
          // this.queryDeviceById(doorId)
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    saveDoorDevice() {
      this.$refs.deviceForm.validate(valid => {
        if (valid) {
          this.showDeviceButton = false
          addDoorDevice(this.deviceForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.deviceFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    bindPowerDevice(doorId) {
      this.showPowerButton = true
      this.powerFormVisible = true
      this.powerForm = {}
      selectPowerDevice().then(({ data: { data } }) => {
        this.powerForm.doorId = doorId
        this.powers = data
        this.loading = false
      })
      this.$refs.powerForm && this.$refs.powerForm.resetFields()
    },
    unbindPowerDevice(doorId) {
      this.$confirm('是否解绑电源, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePowerDevice(doorId).then(({ data: { data, msg } }) => {
          // this.queryPowerDeviceById(doorId)
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    saveDoorPower() {
      this.$refs.powerForm.validate(valid => {
        if (valid) {
          this.showPowerButton = false
          addDoorPowerDevice(this.powerForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.powerFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    queryDeviceById(rowId) {
      this.detailFormVisible = false
      selectDeviceDoor(rowId).then(({ data: { data } }) => {
        this.deviceDetailFormVisible = true
        if (data === undefined) {
          this.deviceDetailForm = []
          this.unbindDeviceButton = false
        } else {
          this.deviceDetailForm = data
          this.unbindDeviceButton = true
        }
        this.loading = false
      })
    },
    queryPowerDeviceById(rowId) {
      selectPowerDeviceById(rowId).then(({ data: { data } }) => {
        // this.powerDetailFormVisible = true
        if (data === undefined) {
          this.powerDetailForm = []
          this.unbindPowerDeviceButton = false
        } else {
          this.powerDetailForm = data
          this.unbindPowerDeviceButton = true
        }
        this.loading = false
      })
    },
    openAddDoor() {
      this.exampleForm = {}
      this.citys = []
      this.districts = []
      this.communitys = []
      this.dialogFormVisible = true
      this.showProvince = true
      this.showCity = true
      this.showCommunity = true
      this.showDistrict = true
      this.$refs.exampleForm && this.$refs.exampleForm.resetFields()
      this.exampleForm.type = 0
    },
    editExample({ doorId }) {
      this.showProvince = false
      this.showCity = false
      this.showDistrict = false
      this.showCommunity = false
      this.showUnit = false
      this.showHouse = false
      querDoorDetail(doorId).then(({ data: { code, data, msg } }) => {
        this.dialogFormVisible = true
        if (code === 0) {
          this.exampleForm = {
            rowId: data.rowId,
            code: data.code,
            name: data.name,
            type: data.type,
            status: data.status,
            door1: data.door1,
            door2: data.door2,
            door3: data.door3,
            communityId: 0
          }
        }
      })
    },
    saveDoor() {
      this.$refs.exampleForm.validate(valid => {
        if (valid) {
          if (
            this.exampleForm.communityId === '' ||
            this.exampleForm.communityId === undefined
          ) {
            this.$message({
              showClose: true,
              message: '请选择小区',
              type: 'warning'
            })
          } else {
            saveDoor(this.exampleForm).then(({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.dialogFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            })
          }
        } else {
          return false
        }
      })
    },
    cascade(rowId, level, param) {
      if (param === 'query') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.queryForm.cityId = ''
                this.queryForm.districtId = ''
                this.queryForm.communityId = ''
                this.citys = []
                this.districts = []
                this.communitys = []
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.queryForm.districtId = ''
                this.queryForm.communityId = ''
                this.districts = []
                this.communitys = []
                this.districts = data
              })
              return
            case 'chooseDistrict':
              selectAllCommunity(rowId).then(({ data: { data } }) => {
                this.queryForm.communityId = ''
                this.communitys = []
                this.communitys = data
              })
              return
            case 'chooseCommunity':
              selectAllCommunity(this.queryForm.districtId).then(
                ({ data: { data } }) => {
                  this.communitys = data
                }
              )
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.queryForm.cityId = ''
              this.queryForm.districtId = ''
              this.queryForm.communityId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              return
            case 'chooseCity':
              this.queryForm.districtId = ''
              this.queryForm.communityId = ''
              this.districts = []
              this.communitys = []
              return
            case 'chooseDistrict':
              this.queryForm.communityId = ''
              this.communitys = []
              return
          }
        }
      } else if (param === 'example') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.exampleForm.cityId = ''
                this.exampleForm.districtId = ''
                this.exampleForm.communityId = ''
                this.citys = []
                this.districts = []
                this.communitys = []
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.exampleForm.districtId = ''
                this.exampleForm.communityId = ''
                this.districts = []
                this.communitys = []
                this.districts = data
              })
              return
            case 'chooseDistrict':
              selectAllCommunity(rowId).then(({ data: { data } }) => {
                this.exampleForm.communityId = ''
                this.communitys = []
                this.communitys = data
              })
              return
            case 'chooseCommunity':
              selectAllCommunity(this.exampleForm.districtId).then(
                ({ data: { data } }) => {
                  this.communitys = data
                }
              )
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.exampleForm.cityId = ''
              this.exampleForm.districtId = ''
              this.exampleForm.communityId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              return
            case 'chooseCity':
              this.exampleForm.districtId = ''
              this.exampleForm.communityId = ''
              this.districts = []
              this.communitys = []
              return
            case 'chooseDistrict':
              this.exampleForm.communityId = ''
              this.communitys = []
              return
          }
        }
      }
    },
    handleOpenDoor(form) {
      this.loading = true
      openDoor(form)
        .then(({ data: { code, data, msg } }) => {
          this.loading = false
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
        .catch(_ => {
          this.loading = false
        })
    },
    handleSyncParam(form) {
      this.loading = true
      syncParam(form)
        .then(({ data: { code, data, msg } }) => {
          this.loading = false
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
        .catch(_ => {
          this.loading = false
        })
    }
  },
  components: {}
}
</script>

<style scoped></style>
